<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML提取器测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .product-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .product-title {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
            color: #333;
        }
        .product-price {
            color: #e74c3c;
            font-size: 16px;
            font-weight: bold;
        }
        .product-link {
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
        }
        .product-link:hover {
            text-decoration: underline;
        }
        .product-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>HTML提取器测试页面</h1>
    <p>这是一个用于测试HTML提取器插件的页面。</p>
    
    <div class="product-card">
        <img src="https://via.placeholder.com/100x100/4CAF50/FFFFFF?text=商品1" 
             alt="商品图片1" 
             class="product-image">
        <h3 class="product-title">优质商品标题1</h3>
        <p class="product-price">¥99.00</p>
        <a href="https://example.com/product/123" 
           class="product-link" 
           target="_blank">
            查看商品详情
        </a>
    </div>
    
    <div class="product-card">
        <img src="https://via.placeholder.com/100x100/2196F3/FFFFFF?text=商品2" 
             alt="商品图片2" 
             class="product-image">
        <h3 class="product-title">优质商品标题2</h3>
        <p class="product-price">¥199.00</p>
        <a href="https://example.com/product/456" 
           class="product-link" 
           target="_blank">
            立即购买
        </a>
    </div>
    
    <div class="product-card">
        <img src="https://via.placeholder.com/100x100/FF9800/FFFFFF?text=商品3" 
             alt="商品图片3" 
             class="product-image">
        <h3 class="product-title">优质商品标题3</h3>
        <p class="product-price">¥299.00</p>
        <a href="https://example.com/product/789" 
           class="product-link" 
           target="_blank">
            加入购物车
        </a>
    </div>
    
    <h2>测试说明</h2>
    <p>你可以使用以下选择器来测试提取功能：</p>
    <ul>
        <li><strong>标题提取：</strong> <code>.product-title</code></li>
        <li><strong>价格提取：</strong> <code>.product-price</code></li>
        <li><strong>链接提取：</strong> <code>.product-link</code> (属性: href)</li>
        <li><strong>图片提取：</strong> <code>.product-image</code> (属性: src)</li>
        <li><strong>组合提取：</strong> <code>.product-title | .product-price | .product-link</code></li>
    </ul>
    
    <p>测试配置管理功能：</p>
    <ol>
        <li>点击"配置管理"按钮</li>
        <li>在"添加配置"标签页中添加当前页面的配置</li>
        <li>保存配置后，点击"自动填充"按钮测试自动填充功能</li>
        <li>尝试导出和导入配置</li>
    </ol>
</body>
</html>